<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>详情页</title>
    <link th:href="@{/project/css/public.css}" rel="stylesheet"/>
    <link th:href="@{/project/css/proList.css}" rel="stylesheet"/>
</head>
<body>
<!------------------------------head------------------------------>
<div class="head" th:include="include::normal_headDiv"></div>
<!-----------------address------------------------------->
<div class="address">
    <div class="wrapper clearfix">
        <a th:href="@{/index}">首页</a>
        <span>/</span>
        <a th:href="@{/index/searchGoods(dictCode=${goodsInfo.dictCode})}" th:text="${goodsInfo.goodsTypeName}"></a>
        <span>/</span>
        <a href="#" class="on">餐饮详情</a>
    </div>
</div>
<!-----------------------Detail------------------------------>
<form id="buyForm" th:attr="action=@{/user/userOrder/placeOrder}" method="post">
    <input type="hidden" name="isFromCart" value="0">
    <input type="hidden" name="goodsId" id="goodsId" th:value="${goodsInfo.goodsId}">
    <div class="detCon">
        <div class="proDet wrapper">
            <div class="proCon clearfix">
                <div class="proImg fl">
                    <img id="mainImg" class="det" th:src="${goodsInfo.imgUrl}"/>
                </div>
                <div class="fr intro" th:object="${goodsInfo}">
                    <div class="title">
                        <h4 th:text="*{goodsName}"></h4>
                        <p th:text="*{briefInformation}"></p>
                        <span th:text="*{'￥'+goodsPrice}"></span>
                    </div>
                    <div class="proIntro">
                        <p>原料：<span  th:text="${goodsInfo.attr1}"></span></p>

                        <p>剩&nbsp;&nbsp;余<span id="goodsLeft" th:text="${goodsInfo.goodsLeft}"></span>份</p>
                        <div class="num clearfix">
                            <img class="fl sub" th:src="@{/img/sub.jpg}">
                            <span class="fl" id="goodsNum">1</span>
                            <input type="hidden" name="goodsNum" value="1">
                            <img class="fl add" th:src="@{/img/add.jpg}">
                        </div>
                    </div>
                    <div class="proIntro">
                        <p>商家店铺：<a style="font-size: 20px" class="aclick" th:href="@{${'/index/userSeller/'+goodsInfo.userId}}"  th:text="${goodsInfo.userName}"></a></p>
                    </div>
                    <div class="btns clearfix">
                        <a href="javascript:void(0)" th:onclick="|preferAdd(this,${goodsInfo.goodsId})|"
                           class="prefer fl" th:if="${preferFlag eq '0'}"><span>收藏</span></a>
                        <a href="javascript:void(0)" th:onclick="|preferCancel(this,${goodsInfo.goodsId})|"
                           class="prefer cancel fl" th:if="${preferFlag eq '1'}"><span>取消收藏</span></a>
                        <a href="javascript:$('#buyForm').submit();"><p class="cart fl">立即购买</p></a>
                        <a href="javascript:void(0)" ><p class="buy fl" th:onclick="|addCartClick(this,*{goodsId},$('#goodsNum').text())|">加入购物车</p></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
<div class="introMsg wrapper clearfix">
    <div class="msgL fl" style="width: 100%;">
        <div class="msgTit clearfix">
            <a class="on">餐饮详情</a>
            <a>所有评价</a>
        </div>
        <div class="msgAll" style="margin-bottom: 100px;">
            <div class="msgImgs" th:utext="${goodsInfo.details}"></div>
            <div class="eva" id="remarksContent"></div>
        </div>
    </div>
</div>

<!--返回顶部-->
<div th:include="include::normal_footerDiv"></div>
<div th:include="include::footer_normal"></div>
<script th:src="@{/project/pro.js}"></script>
<script th:src="@{/project/cart.js}"></script>
<script th:src="@{/ajax/libs/okzoom.js}"></script>
<script type="text/javascript">

    //评论和餐饮详情切换
    $(".msgTit").find("a").click(function () {
        var index = $(this).prevAll("a").length;
        $(".msgTit a").removeClass("on");
        $(this).addClass("on");
        $(".msgAll .msgImgs,.msgAll .eva").hide();
        if(index==0){
            $(".msgAll .msgImgs").show();
        }else{
            $(".msgAll .eva").show();
        }
    });
    //数量加1
    $(".proDet .add").click(function () {
        var num = parseInt($("#goodsNum").text()) + 1;
        if(num > $("#goodsLeft").html()*1){
            num = $("#goodsLeft").html()*1;
        }
        $("#goodsNum").text(num);
        $("#goodsNum").next().val(num)
        // $("#totalPrice").html($.count.multiply(num,$("#unitPrice").html()).toFixed(2)+"元");
    });
    //数量减1
    $(".proDet .sub").click(function () {
        var num = parseInt($("#goodsNum").text()) - 1;
        if (num < 1) {
            num = 1;
        }
        $("#goodsNum").text(num);
        $("#goodsNum").next().val(num)
        // $("#totalPrice").html($.count.multiply(num,$("#unitPrice").html()).toFixed(2)+"元");
    });

    $("#remarksContent").paginationInit({
        url: ctx + "index/searchGoodsRemarks",
        ajaxParams: {
            goodsId: $("#goodsId").val()
        },
        pageList: [10, 20, 30, 40, 100],
        loadDataItem: function (obj) {
            return '<div class="per clearfix">' +
                '<div class="perR fl">' +
                '<div><span data-score="' + obj.star + '"></span></div>' +
                '<div class="star" data-score="' + obj.star + '"></div>' +
                '<p>' + obj.msg + '</p>' +
                '<div class="clearfix">' +
                // '<p><img src="img/temp/eva01.jpg"></p>' +
                // '<p><img src="img/temp/eva02.jpg"></p>' +
                // '<p><img src="img/temp/eva03.jpg"></p>' +
                // '<p><img src="img/temp/eva04.jpg"></p>' +
                // '<p><img src="img/temp/eva05.jpg"></p>' +
                '</div>' +
                '<p><span>' + obj.createTime + '</span><span>' + obj.userName + '</span></p>' +
                '</div>' +
                '</div>';

        },
        onloadFinish: function () {
            $("#remarksContent .star").raty({
                score: function () {
                    return $(this).data('score');
                },
                readOnly: true
            });
        }
    });

</script>
</body>
</html>
